<template>
  <div>
    <div class="breadcrumb">
      <span>create /</span>
      <span class="key" @click="to()">{{ $route.query.prefixKey }}</span>
    </div>
    <h2 class="title">New Key / Value</h2>

    <div>
      <span ref="key" warn="" class="item-title">Key or folder</span>
      <el-input placeholder="Key or flder" v-model="key"></el-input>
      <span style="font-size: 12px; color: #8e96a3;">To create a folder, end a key with /</span>
    </div>

    <div v-if="!isDir">
      <span ref="checkerId" warn="" class="item-title">checker</span>
      <el-select v-model="checkerId" filterable placeholder="请选择Checker">
        <el-option v-for="item in checkerList" :key="item._id" :value="item._id" :lable="item.name" size="mini"></el-option>
      </el-select>
    </div>

    <div v-if="!isDir">
      <span class="item-title" ref="describe" warn="">describe</span>
      <el-input type="textarea" v-model="describe"></el-input>
    </div>

    <div v-if="!isDir">
      <span class="item-title" style="height: 40px" ref="value" warn="">
        value
        <el-select v-model="type" filterable placeholder="请选择Value类型">
          <el-option v-for="item in typeOptions" :key="item" :value="item" size="mini" class="select"></el-option>
        </el-select>
      </span>
      <monaco
        height="300px"
        :language="type"
        @cursor-position="Object.assign(monaco.cursorPosition, $event)"
        @get-value="getValue=$event"
        :disable_warn="true"
        @save="save"
      ></monaco>
    </div>

    <el-divider></el-divider>

    <div class="save" @click="save">save</div>
  </div>
</template>

<script>
module.exports = {
  components: { monaco: 'url:./monaco.vue' },
  data: function () {
    return {
      key: '',
      dc: window.app.dc,
      checkerId: '',
      describe: '',
      type: '',
      getValue: null,
      checkerList: [
        // TODO
        { _id: 'xxxxxx3xxx', name: '正则校验器' },
        { _id: 'xxx3xxxxxx', name: '数值校验器' },
        { _id: 'xxxxxxx34xx', name: '参数校验器' },
        { _id: 'xxxx3xxx3xx', name: '搜地校验器' },
      ],
      typeOptions: [
        'json',
        'path',
        'url',
        'number',
        'ip',
        'dir',
      ],
      // 编辑器相关
      monaco: {
        // 光标位置
        cursorPosition: { lineNumber: 1, column: 1 },
        setModel: null,
      }
    };
  },
  mounted() {
  },
  computed: {
    isDir() {
      if (/\/$/.test(this.key)) {
        this.type = 'dir';
        return true;
      } else {
        this.type = this.typeOptions[0];
      }
    },
    value() {
      return this.getValue ? this.getValue() : '';
    }
  },
  methods: {
    to() {
      this.$router.push({
        path: '/kv',
        query: { dc: window.app.dc, key: this.$route.query.prefixKey, type: 'dir' },
      });
    },
    async save() {
      let warn = false;
      const checkeList = ['key'];
      if (!this.isDir) {
        checkeList.push('checkerId', 'describe', 'type');
      }
      for (const key of checkeList) {
        if (!this[key]) {
          warn = true;
          this.$refs[key].attributes.warn.value = '该选项不能为空！';
        }
      }
      if (/^\//.test(this.key)) {
        warn = true;
        this.$refs.key.attributes.warn.value = 'key不能以 / 开头';
      }
      if (warn) {
        this.$message.error('校验失败！');
        return;
      }
      const key = `${ this.$route.query.prefixKey }/${ this.key }`;
      const { data } = await axios.put('/consul/create-key', {
        key,
        value: this.value,
        dc: window.app.dc,
        checkerId: this.checkerId,
        describe: this.describe,
        type: this.type,
      });
      if (data.success) {
        this.info = data.info;
        this.$message.success('创建成功！');
        this.$router.push({
        path: '/kv',
        query: { dc: window.app.dc, key: key.replace(/\/$/, ''), type: this.type },
      });
      }
    },
  },
  beforeRouteUpdate(to, _from, next) {
    window.app.dc = to.query.dc;
    next();
  },
  watch: {
  },
};
</script>

<style scoped>

.key {
  transition: .3s;
  cursor: pointer;
}

.key:hover {
  color: #000;
  text-decoration: underline;
}

.breadcrumb {
  color: #6f7682;
  height: 40px;
  line-height: 40px;
}

.title {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dce0e6;
}

.item-title {
  font-size: 14px;
  display: block;
  padding: 10px 0;
  font-family: DejaVuSansMono;
}

.item-title:after {
  content: attr(warn);
  color: var(--warn);
  padding-left: 10px;
  font-size: 13px;
}

.select {
  float: right;
}

.save {
  height: 30px;
  line-height: 30px;
  background: var(--theme-color);
  text-align: center;
  width: 60px;
  border-radius: 5px;
  color: rgb(255, 255, 255);
  font-size: 14px;
  cursor: pointer;
  transition: .3s;
  margin-bottom: 30px;
}

</style>